<!doctype html>
<html lang="en"xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="favicon.ico">
    <title>Tiny Dashboard - A Bootstrap Dashboard Template</title>
    <!-- Simple bar CSS -->
    <link rel="stylesheet" th:href="@{/dash/css/simplebar.css}">
    <!-- Fonts CSS -->
<!--    <link href="https://fonts.googleapis.com/css2?family=Overpass:ital,wght@0,100;0,200;0,300;0,400;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">-->
    <!-- Icons CSS -->
    <link rel="stylesheet" th:href="@{/dash/css/feather.css}">
    <link rel="stylesheet" th:href="@{/dash/css/select2.css}">
    <link rel="stylesheet" th:href="@{/dash/css/dropzone.css}">
    <link rel="stylesheet" th:href="@{/dash/css/uppy.min.css}">
    <link rel="stylesheet" th:href="@{/dash/css/jquery.steps.css}">
    <link rel="stylesheet" th:href="@{/dash/css/jquery.timepicker.css}">
    <link rel="stylesheet" th:href="@{/dash/css/quill.snow.css}">
    <link rel="stylesheet" th:href="@{/dash/css/dataTables.bootstrap4.css}">
    <!-- Date Range Picker CSS -->
    <link rel="stylesheet" th:href="@{/dash/css/daterangepicker.css}">
    <!-- App CSS -->
    <link rel="stylesheet" th:href="@{/dash/css/app-light.css}" id="lightTheme">
    <link rel="stylesheet" th:href="@{/dash/css/app-dark.css}" id="darkTheme" disabled>
  </head>
  <body class="vertical  light  ">
    <div class="wrapper">
      <nav th:replace="~{comm/blank::topnav}"/>
      <aside th:replace="~{comm/blank::aside}"/>
      <main role="main" class="main-content">
        <div class="container-fluid">
          <div class="row justify-content-center">
            <div class="col-12">
              <div th:replace="~{indent-sale::sale-detail}"/> <!-- end section -->
                <div th:replace="~{item-pick::cartModal}"/>
              <div class="row align-items-center my-2">
                <div class="col-auto ml-auto">
                  <form class="form-inline">
                    <div class="form-group">
                      <label for="reportrange" class="sr-only">Date Ranges</label>
                      <div id="reportrange" class="px-2 py-2 text-muted">
                        <i class="fe fe-calendar fe-16 mx-2"></i>
                        <span class="small"></span>
                      </div>
                    </div>
                    <div class="form-group">
                      <button type="button" class="btn btn-sm"><span class="fe fe-refresh-ccw fe-12 text-muted"></span></button>
                      <button type="button" class="btn btn-sm"><span class="fe fe-filter fe-12 text-muted"></span></button>
                    </div>
                  </form>
                </div>
              </div>

                <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
                <div class="row">
                    <div class="col-md-6 mb-4">
                        <div id="main" style="width: 600px;height:400px;"></div>
                    </div>
                    <div class="col-md-6 mb-4">
                        <div id="main1" style="width: 600px;height:400px;"></div>
                    </div>
                </div>

              <!-- charts-->
              <!--数据在appjs(chartjs)和apexchart-custom里-->
              <div class="row">
                <div class="col-md-6 mb-4">
                  <div class="card shadow">
                    <div class="card-header">
                      <strong class="card-title mb-0">月销售额条形图</strong>
                      <div class="dropdown float-right">
                        <button class="btn btn-sm btn-link text-muted dropdown-toggle p-0" type="button" id="rangeDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 7天 </button>
                        <div class="dropdown-menu dropdown-menu-right" aria-labelledby="rangeDropdown">
                          <a class="dropdown-item small text-muted" href="#">30 天</a>
                          <a class="dropdown-item small active" href="#">90 天</a>
                          <a class="dropdown-item small text-muted" href="#">全部</a>
                        </div>
                      </div>
                    </div>
                    <div class="card-body">
                      <canvas id="barChartjs" width="400" height="300"></canvas>
                    </div> <!-- /.card-body -->
                  </div> <!-- /.card -->
                </div>
                <div class="col-md-6 mb-4">
                  <div class="card shadow">
                    <div class="card-header">
                      <strong class="card-title mb-0">Line Chart</strong>
                      <span class="badge badge-light float-right mr-2">30 days</span>
                      <span class="badge badge-light float-right mr-2">7 days</span>
                      <span class="badge badge-secondary float-right mr-2">Today</span>
                    </div>
                    <div class="card-body">
                      <canvas id="lineChartjs" width="400" height="300"></canvas>
                    </div> <!-- /.card-body -->
                  </div> <!-- /.card -->
                </div> <!-- /. col -->
              </div>

              <div class="row">
                <!-- Recent orders -->
                <div class="col-md-12">
                  <h6 class="mb-3">最近订单</h6>
                  <div class="card shadow">
                    <div class="card-body">
<!--                      <div class="dataTables_filter">-->
<!--                        <select text="过滤" style="width: fit-content;float:right;">-->
<!--                          <option value ="1">分类</option>-->
<!--                          <option value ="2">名称</option>-->
<!--                          <option value="3">订单ID</option>-->
<!--                          <option value="4">商品ID</option>-->
<!--                        </select>-->
<!--                      </div>-->
                  <table class="table datatables" id="dataTable-1">
                    <thead>
                    <tr>
                      <th></th>
                      <th>用户ID</th>
                      <th>订单ID</th>
                      <th>商品ID</th>
                      <th>商品名</th>
                      <th>分类</th>
                      <th>售价</th>
                      <th>数量</th>
                      <th>创建时间</th>
                      <th>更新时间</th>
                      <th>操作</th>
                    </tr>
                    </thead>
                    <tbody>
                    <th:block th:if="${indents!=null}" th:each="indent:${indents}">
                      <tr>
                        <td>
                          <div class="custom-control custom-checkbox">
                            <input name="sel" type="checkbox" class="custom-control-input" th:id="${indent.id}">
                            <label class="custom-control-label" th:for="${indent.id}"></label>
                          </div>
                        </td>
                        <td th:text="${indent.userId}"></td>
                        <td th:text="${indent.indentId}"></td>
                        <td th:text="${indent.itemId}"></td>
                        <td th:text="${indent.itemName}"></td>
                        <td th:text="${typeName.get(indent.itemType)}"></td>
                        <td th:text="${indent.priceSell}"></td>
                        <td th:text="${indent.count}"></td>
                        <td th:text="${#temporals.format(indent.createTime,'yyyy-MM-dd HH:mm:ss')}"></td>
                        <td th:text="${#temporals.format(indent.updateTime,'yyyy-MM-dd HH:mm:ss')}"></td>
                        <td><button class="btn btn-sm dropdown-toggle more-horizontal" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                          <span class="text-muted sr-only">操作</span>
                        </button>
                          <div class="dropdown-menu dropdown-menu-right">
                            <a class="dropdown-item" th:href="@{/indent/detail(indentId=${indent.indentId})}">详情</a>
                            <a class="dropdown-item" th:href="@{/indent/del(indentId=${indent.indentId})}">删除</a>
                          </div>
                        </td>
                      </tr>
                    </th:block>
                    </tbody>
                  </table>
                    </div>
                  </div>
                </div> <!-- / .col-md-3 -->
              </div> <!-- end section -->
            </div>
          </div> <!-- .row -->
        </div> <!-- .container-fluid -->
        <div th:replace="~{comm/blank::modal1}"/>
        <div th:replace="~{comm/blank::modal2}"/>
      </main> <!-- main -->
    </div> <!-- .wrapper -->
    <script th:src="@{/js/echarts.min.js}"></script>
    <script th:src="@{/dash/js/jquery.min.js}"></script>
    <script th:src="@{/dash/js/popper.min.js}"></script>
    <script th:src="@{/dash/js/moment.min.js}"></script>
    <script th:src="@{/dash/js/bootstrap.min.js}"></script>
    <script th:src="@{/dash/js/simplebar.min.js}"></script>
    <script th:src='@{/dash/js/daterangepicker.js}'></script>
    <script th:src='@{/dash/js/jquery.stickOnScroll.js}'></script>
    <script th:src="@{/dash/js/tinycolor-min.js}"></script>
    <script th:src="@{/dash/js/config.js}"></script>
    <script th:src="@{/dash/js/d3.min.js}"></script>
    <script th:src="@{/dash/js/topojson.min.js}"></script>
    <script th:src="@{/dash/js/datamaps.all.min.js}"></script>
    <script th:src="@{/dash/js/datamaps-zoomto.js}"></script>
    <script th:src="@{/dash/js/datamaps.custom.js}"></script>
    <script th:src="@{/dash/js/Chart.min.js}"></script>
    <script th:src='@{/dash/js/jquery.dataTables.min.js}'></script>
    <script th:src='@{/dash/js/dataTables.bootstrap4.min.js}'></script>
    <script th:src="@{/dash/js/jquery.stickOnScroll.js}"></script>
    <script>
      $('#dataTable-1').DataTable(
              {
                autoWidth: true,
                "lengthMenu": [
                  [16, 32, 64, -1],
                  [16, 32, 64, "All"]
                ]
              });
    </script>
    <script>
      /* defind global options */
      Chart.defaults.global.defaultFontFamily = base.defaultFontFamily;
      Chart.defaults.global.defaultFontColor = colors.mutedColor;
    </script>

    <script th:src="@{/dash/js/jquery.canvasjs.min.js}"></script>
    <script th:src="@{/dash/js/canvasjs.min.js}"></script>
    <script th:src="@{/dash/js/gauge.min.js}"></script>
    <script th:src="@{/dash/js/jquery.sparkline.min.js}"></script>
    <script th:src="@{/dash/js/apexcharts.min.js}"></script>
    <script th:src="@{/dash/js/apexcharts.custom.js}"></script>
    <script th:src='@{/dash/js/jquery.mask.min.js}'></script>
    <script th:src='@{/dash/js/select2.min.js}'></script>
    <script th:src='@{/dash/js/jquery.steps.min.js}'></script>
    <script th:src='@{/dash/js/jquery.validate.min.js}'></script>
    <script th:src='@{/dash/js/jquery.timepicker.js}'></script>
    <script th:src='@{/dash/js/dropzone.min.js}'></script>
    <script th:src='@{/dash/js/uppy.min.js}'></script>
    <script th:src='@{/dash/js/quill.min.js}'></script>
    <script th:src="@{/js/handle/init-price.js}"></script>
    <script th:src="@{/js/handle/cart.js}"></script>
    <script>
      $('.select2').select2(
      {
        theme: 'bootstrap4',
      });
      $('.select2-multi').select2(
      {
        multiple: true,
        theme: 'bootstrap4',
      });
      $('.drgpicker').daterangepicker(
      {
        singleDatePicker: true,
        timePicker: false,
        showDropdowns: true,
        locale:
        {
          format: 'MM/DD/YYYY'
        }
      });
      $('.time-input').timepicker(
      {
        'scrollDefault': 'now',
        'zindex': '9999' /* fix modal open */
      });
      /** date range picker */
      if ($('.datetimes').length)
      {
        $('.datetimes').daterangepicker(
        {
          timePicker: true,
          startDate: moment().startOf('hour'),
          endDate: moment().startOf('hour').add(32, 'hour'),
          locale:
          {
            format: 'M/DD hh:mm A'
          }
        });
      }
      var start = moment().subtract(29, 'days');
      var end = moment();

      function cb(start, end)
      {
        $('#reportrange span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
      }
      $('#reportrange').daterangepicker(
      {
        startDate: start,
        endDate: end,
        ranges:
        {
          'Today': [moment(), moment()],
          'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
          'Last 7 Days': [moment().subtract(6, 'days'), moment()],
          'Last 30 Days': [moment().subtract(29, 'days'), moment()],
          'This Month': [moment().startOf('month'), moment().endOf('month')],
          'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
        }
      }, cb);
      cb(start, end);
      $('.input-placeholder').mask("00/00/0000",
      {
        placeholder: "__/__/____"
      });
      $('.input-zip').mask('00000-000',
      {
        placeholder: "____-___"
      });
      $('.input-money').mask("###000",
      {
        reverse: true
      });
      $('.input-phoneus').mask('(000) 000-0000');
      $('.input-mixed').mask('AAA 000-S0S');
      $('.input-ip').mask('0ZZ.0ZZ.0ZZ.0ZZ',
      {
        translation:
        {
          'Z':
          {
            pattern: /[0-9]/,
            optional: true
          }
        },
        placeholder: "___.___.___.___"
      });
      // editor
      var editor = document.getElementById('editor');
      if (editor)
      {
        var toolbarOptions = [
          [
          {
            'font': []
          }],
          [
          {
            'header': [1, 2, 3, 4, 5, 6, false]
          }],
          ['bold', 'italic', 'underline', 'strike'],
          ['blockquote', 'code-block'],
          [
          {
            'header': 1
          },
          {
            'header': 2
          }],
          [
          {
            'list': 'ordered'
          },
          {
            'list': 'bullet'
          }],
          [
          {
            'script': 'sub'
          },
          {
            'script': 'super'
          }],
          [
          {
            'indent': '-1'
          },
          {
            'indent': '+1'
          }], // outdent/indent
          [
          {
            'direction': 'rtl'
          }], // text direction
          [
          {
            'color': []
          },
          {
            'background': []
          }], // dropdown with defaults from theme
          [
          {
            'align': []
          }],
          ['clean'] // remove formatting button
        ];
        var quill = new Quill(editor,
        {
          modules:
          {
            toolbar: toolbarOptions
          },
          theme: 'snow'
        });
      }
      // Example starter JavaScript for disabling form submissions if there are invalid fields
      (function()
      {
        'use strict';
        window.addEventListener('load', function()
        {
          // Fetch all the forms we want to apply custom Bootstrap validation styles to
          var forms = document.getElementsByClassName('needs-validation');
          // Loop over them and prevent submission
          var validation = Array.prototype.filter.call(forms, function(form)
          {
            form.addEventListener('submit', function(event)
            {
              if (form.checkValidity() === false)
              {
                event.preventDefault();
                event.stopPropagation();
              }
              form.classList.add('was-validated');
            }, false);
          });
        }, false);
      })();
    </script>
    <script>
      var uptarg = document.getElementById('drag-drop-area');
      if (uptarg)
      {
        var uppy = Uppy.Core().use(Uppy.Dashboard,
        {
          inline: true,
          target: uptarg,
          proudlyDisplayPoweredByUppy: false,
          theme: 'dark',
          width: 770,
          height: 210,
          plugins: ['Webcam']
        }).use(Uppy.Tus,
        {
          endpoint: 'https://master.tus.io/files/'
        });
        uppy.on('complete', (result) =>
        {
          console.log('Upload complete! We’ve uploaded these files:', result.successful)
        });
      }
    </script>

<!--    <script>-->
<!--      window.onload = function () {-->
<!--        var checkcart1 = document.getElementById('cartbag');-->
<!--        let res = 0-->
<!--        $.ajax({-->
<!--          type:'get',-->
<!--          url:"/cart/checkAmount",-->
<!--          async:false,-->
<!--          success:function(result){-->
<!--            console.log(result)-->
<!--            res = result-->
<!--            if (result>0){-->
<!--              var span = document.createElement('span'); //1、创建元素-->
<!--              //设置 span 属性，如 id-->
<!--              span.setAttribute("class", "dot dot-md bg-success");-->
<!--              var container = document.getElementById('cartbag'); //2、找到父级元素-->
<!--              container.appendChild(span); //3、在末尾中添加元素-->
<!--            }-->

<!--          }});-->

<!--      }-->
<!--    </script>-->
    <script th:src="@{/dash/js/apps.js}"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var myChart = echarts.init(document.getElementById('main'));
            // 显示标题，图例和空的坐标轴
            myChart.setOption({
                title: {
                    text: '月订单额分布'
                },
                tooltip: {},
                legend: {
                    data:['销量']
                },
                xAxis: {
                    data: []
                },
                yAxis: {},
                series: [{
                    name: '销量',
                    type: 'bar',
                    data: []
                }]
            });

            myChart.showLoading();    //数据加载完之前先显示一段简单的loading动画

            var names=[];    //类别数组（实际用来盛放X轴坐标值）
            var nums=[];    //销量数组（实际用来盛放Y坐标值）


            $.ajax({
                type : "get",
                async : true,            //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
                url : "/dashboard/indentsChart",    //请求发送到TestServlet处
                data : {},
                dataType : "json",        //返回数据形式为json
                success : function(result) {
                    // alert('success')
                    console.log(result)
                    //请求成功时执行该函数内容，result即为服务器返回的json对象
                    if (result){
                        for (let resKey in result) {
                            names.push(resKey)
                            nums.push(result[resKey])
                        }
                        myChart.hideLoading();    //隐藏加载动画
                        myChart.setOption({        //加载数据图表
                            xAxis: {
                                data: names
                            },
                            series: [{
                                // 根据名字对应到相应的系列
                                name: '销量',
                                data: nums
                            }]
                        });
                    }
                },
                error : function(errorMsg) {
                    //请求失败时执行该函数
                    alert("图表请求数据失败!");
                    myChart.hideLoading();
                }
            })
        })
    </script>
    <script type="text/javascript">
        var echartsPie = echarts.init(document.getElementById('main1'));
        var names=[];    //类别数组（实际用来盛放X轴坐标值）
        var nums=[];    //销量数组（实际用来盛放Y坐标值）
        $.get('/dashboard/bestSellItems').done(function (data) {
            /* $.post("user_linkByPhone.action", function(datas) {*/
            //alert(datas);

            //  var data= $.parseJSON(data);    //将传递过来的json字符串转化为对象
            // alert(data);
            console.log(data);
            var servicedata = [];
            if (data) {
                for (let resKey in data) {
                    names.push(resKey)
                    nums.push(data[resKey])
                }
                /*       for (var i = 0; i < names.length; i++) {*/
                for (var i = 0; i < 5; i++) {
                    var obj = new Object();
                    obj.name = names[i];
                    obj.value = nums[i];
                    servicedata[i] = obj;

                }
                // alert(servicedata);

                echartsPie.setOption({
                    title: {
                        text: '最高销售量商品分布',
                        subtext: '饼图',
                        x: 'center'
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: "{b} <br/>{c} : {d} %"      //a 系列名称，b 数据项名称，c 数值，d 百分比
                    },
                    legend: {
                        orient: 'vertical',
                        x: 'left',
                        data: data.name
                    },
                    toolbox: {
                        show: true,
                        feature: {
                            mark: {show: true},
                            dataView: {show: true, readOnly: false},
                            magicType: {
                                show: true,
                                type: ['pie', 'funnel'],
                                option: {
                                    funnel: {
                                        x: '25%',
                                        width: '50%',
                                        funnelAlign: 'left',
                                        max: 1548
                                    }
                                }
                            },
                            restore: {show: true},
                            saveAsImage: {show: true}
                        }
                    },
                    calculable: true,
                    series: [
                        {
                            name: '点击量',
                            type: 'pie',
                            radius: '55%',//饼图的半径大小
                            center: ['50%', '60%'],//饼图的位置
                            data: servicedata
                        }
                    ]
                })
            }
        })

    </script>

  </body>
</html>
